const directions = { 0: "top", 1: "right", 2: "bottom", 3: "left" };
const classNames = ["in", "out"]
  .map((p) => Object.values(directions).map((d) => `${p}-${d}`))
  .reduce((a, b) => a.concat(b));

console.log(classNames);

class ElItem {
  /**
   * dom元素构造函数
   * @param {HTMLElement} element 元素
   */
  constructor(element) {
    this.ele = element;
    this.ele.addEventListener("mouseover", (e) => this.update(e, "in"));
    this.ele.addEventListener("mouseout", (e) => this.update(e, "out"));
  }

  /**
   * 根据鼠标方向及移入移出事件更新元素类名
   * @param {MouseEvent} e 鼠标事件
   * @param {string} prefix 前缀
   */
  update(e, prefix) {
    // 移除元素的所有类名
    this.ele.classList.remove(...classNames);
    // 添加新的类名
    this.ele.classList.add(
      `${prefix}-${directions[ElItem.getDirectionKey(e, this.ele)]}`
    );
  }

  /**
   * 获取鼠标点击位置相对于元素中心点的方向
   * @param {MouseEvent} e
   * @param {HTMLElement} element
   */
  static getDirectionKey(e, element) {
    // 获取元素的位置和大小
    const { width, height, top, left } = element.getBoundingClientRect();
    // 获取鼠标点击位置相对于元素左上角的坐标
    const l = e.pageX - (left + window.scrollX);
    const t = e.pageY - (top + window.scrollY);
    // 获取鼠标点击位置相对于元素中心点的坐标
    const x = l - (width / 2) * (width > height ? height / width : 1);
    const y = t - (height / 2) * (height > width ? width / height : 1);
    // 根据坐标计算鼠标点击位置相对于元素中心点的方向
    return Math.round((Math.atan2(y, x) * 2) / Math.PI + 5) % 4;
  }
}

const items = [].slice.call(document.querySelectorAll("li"), 0);
items.forEach((item) => new ElItem(item));
